{% extends 'base.html' %}
{% load bootstrap_pagination %}
{% load notifications_tags %}
{% load forum_tags %}
{% block main %}
    <main class="col-md-8">
        <ul class="list-group">
            <li class="list-group-item">


                <nav class="row">
                    <div class="col-md-6">
                        <a href="{% url 'forum:index' %}">django forum demo</a> >
                        <a>通知</a>
                    </div>
                    <div class="col-md-3 text-md-right">
                        {% notifications_unread as unread_count %}
                        {% if unread_count %}
                            <a href="{% url 'notifications:mark_all_as_read' %}"
                               class="btn btn-sm btn-outline-info">全部标为已读</a>
                        {% endif %}
                    </div>
                    <div class="col-md-3 text-md-right">
                        <span class="text-muted small">总共收到提醒 {{ paginator.count }}</span>
                    </div>
                </nav>
            </li>
            {% for notification in page_obj %}
                <li class="list-group-item clearfix {% if notification.unread %}bg-faded{% endif %}">
                    {{ notification | describe }}
                    <ul class="list-inline text-muted pull-right" style="margin-top: 5px">
                        <li class="list-inline-item">
                            <time class="small">{{ notification.timestamp|timesince }}前</time>
                        </li>
                        {% if notification.unread %}
                            <li class="list-inline-item"><a
                                    href="{% url 'notifications:mark_as_read' notification.slug %}"
                                    class="tag tag-info mark-btn">标为已读</a></li>
                        {% endif %}
                        <li class="list-inline-item">
                            <a href="{% url 'notifications:delete' notification.slug %}"
                               class="tag tag-danger">删除</a></li>
                    </ul>
                </li>
            {% empty %}
                <li class="list-group-item">
                    <span class="">暂无通知</span>
                </li>
            {% endfor %}
            {% if notifications and paginator.num_pages > 1 %}
                {% bootstrap_paginate page_obj size='small' range=10 show_first_last='true' %}
            {% endif %}
        </ul>
    </main>
{% endblock main %}

{% block script %}
    <script>
        $('.notification-jump').on('click', function (e) {
            var $this = $(this);
            var $state = $this.attr('data-state');

            if (parseInt($state)) {
                var $target = $this.attr('data-target');
                $.get($target);
            }
        })
    </script>
{% endblock script %}